<template>
	<view class="article-images_item" :data-imgjson="imgjson" :data-index="index" @click.stop="actPreviewImage(index)">
		<u-image v-if="JSON.parse(JSON.stringify(imgjson)).length == 1" width="600" :src="item.Src" mode="widthFix"></u-image>
		<u-image v-if="JSON.parse(JSON.stringify(imgjson)).length == 2 || JSON.parse(JSON.stringify(imgjson)).length == 4" width="320" height="280" :src="item.Src" mode="aspectFill"></u-image>
		<u-image v-if="JSON.parse(JSON.stringify(imgjson)).length > 2 && JSON.parse(JSON.stringify(imgjson)).length != 4" width="210" height="210" :src="item.Src" mode="aspectFill"></u-image>
	  <g-preview-img :imgList="imgList" ref="preview" style="position:fixed;bottom:0;left:0;z-index:1000" v-if="showPreviewRef" @preivew="closePreview"></g-preview-img>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				imgList: [],
				showPreviewRef: false,
			}
		},
		props: {
      item: {
        type: Object,
        default: null
      },
			index: {
			    type: Number,
			    default: null
			},
			imgjson:{
        type: Array,
        default: null
      },
			bigImgJson: {
				type: Array,
				default: null
			}
        },
		mounted: function () {
			this.$nextTick(()=> {
				this.imgjson.forEach(item => {
					this.imgList.push(item.Src)
				})
			})
		},
		methods: {
			actPreviewImage(index) {
				this.showPreviewRef = true
				this.$nextTick(()=> {
					this.$refs.preview.handlePreviewImg(index)
				})
			},
			closePreview() {
				this.showPreviewRef = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.article-images {
		clear:both;
		overflow: hidden;
		padding-bottom: 10rpx;
		&_item {
			margin: 10rpx;
			float: left;
		}
	}
</style>
